<template>
    <div id="center4">
        <h2>必看排行榜</h2>
        <div class="c4div1">
            <div class="c4div-con">
                <div class="c4divcon" v-for="shangs in shang" :key="shangs.id">
                    <div class="c4condiv">
                        <img :src="shangs.img" alt="">
                    </div>
                    <li class="c4conli1">{{shangs.name}}</li>
                    <li class="c4conli2">
                        <span>￥{{shangs.price}}</span>起
                    </li>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Paihangbang",
  data(){
      return {
          shang:[]
      }
  },
  created(){
      axios({
          url:"/shangpin"
      }).then(res=>{
          this.shang = res.data
        //   console.log(this.shang)
      })
  }
};
</script>

<style scoped>
#center4{
    width: 100%;height: 1.905rem;
    box-sizing: border-box;
    padding-left: 0.0825rem;
}
h2{
    height: 0.47rem;
    font-size: 0.125rem;
    box-sizing: border-box;
    padding-top: 0.2375rem;
}
.c4div1{
    width: 100%;height: 1.435rem;
    overflow-x: auto;
}
.c4div-con{
    width: 150%;height: 1.435rem;
    display: flex;
    justify-content: space-around;
}
.c4divcon{
    width: 0.675rem;height: 100%;
}
.c4condiv{
    width: 100%;height: 0.9rem;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 0.035rem;
    overflow: hidden;
    /* background-size: contain; */
}
.c4condiv img{
    width: 100%;height: 0.9rem;
}
.c4conli1{
    height: 0.3rem;
    /* line-height: 0.15rem; */
    overflow: hidden;
    font-size: 0.0875rem;
}
.c4conli2{
    padding-top: 0.08rem;
    font-size: 0.065rem;
    color: #9c9ca4;
}
.c4conli2 span{
    font-size: 0.085rem;
    color: #ff2969;
}
</style>
